<template>
  <el-dialog
    title="编辑商品"
    :visible.sync="record.open"
    width="800px"
    :before-close="cancel"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="零件号码" prop="goodsNo">
            <el-input
              v-model="form.goodsNo"
              placeholder="请输入唯一零件号编码"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品中文名称" prop="goodsName">
            <el-input
              v-model="form.goodsName"
              placeholder="请输入商品中文名称"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商品分类" prop="categoryId">
            <el-select clearable ref="selectTree" v-model="form.categoryId">
              <el-option
                v-for="item in formatData(data)"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                style="display: none"
              />
              <el-tree
                class="main-select-el-tree"
                ref="selecteltree"
                :data="data"
                node-key="id"
                highlight-current
                :props="defaultProps"
                @node-click="handleNodeClick"
                :current-node-key="treeName"
                :expand-on-click-node="expandOnClickNode"
                default-expand-all
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位" prop="unit">
            <el-select v-model="form.unit" clearable placeholder="请选择">
              <el-option
                v-for="dict in dict.type.goods_unit"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="供应商" prop="supplier">
            <el-select
            ref="myselect"
              @change="getvaluemethod"
              v-model="form.supplier"
              clearable
              filterable
              placeholder="请选择供应商"
            >
              <el-option
                v-for="item in supplierList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品当前库存" prop="currentStock">
            <el-input
              v-model="form.currentStock"
              placeholder="请输入当前库存"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品型号" prop="model">
            <el-input v-model="form.model" placeholder="请输入商品型号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="体积(立方米)" prop="volume">
            <el-input v-model="form.volume" placeholder="请输入体积(立方米)" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="毛重(公斤)" prop="grossWeight">
            <el-input
              v-model="form.grossWeight"
              placeholder="请输入毛重(公斤)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="净重(公斤)" prop="netWeight">
            <el-input v-model="form.netWeight" placeholder="请输入净重(公斤)" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="长(厘米)" prop="length">
            <el-input v-model="form.length" placeholder="请输入长(厘米)" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="宽(厘米)" prop="width">
            <el-input v-model="form.width" placeholder="请输入宽(厘米)" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="高(厘米)" prop="height">
            <el-input v-model="form.height" placeholder="请输入高(厘米)" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getGoods, updateGoods } from "@/api/tms/goods.js";
import { listGoods } from "@/api/api";
import { getSupplier } from "@/api/tms/inventory";
import { getSupplierDetail } from "@/api/tms/plan.js";
export default {
  name: "EditGoods",
  dicts: ["goods_unit"],
  data() {
    return {
      supplierList: [],
      form: {},
      treeName: "",
      data: [],
      defaultProps: {
        //树形控件的属性绑定对象
        children: "children", //设置通过children属性展示子节点信息
        label: "title", //通过label设置树形节点文本展示
        checkStrictly: true,
      },
      expandOnClickNode: true,
      // 表单校验
      rules: {
        goodsNo: [
          { required: true, message: "零件号码不能为空", trigger: "blur" },
        ],
        unit: [{ required: true, message: "单位不能为空", trigger: "blur" }],
        currentStock: [
          { required: false, message: "单位不能为空", trigger: "blur" },
          {
            pattern: /^[0-9]\d*$/,
            message: "商品库存为正整数",
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {
    record: Object,
  },
  watch: {
    "record.open": {
      deep: true,
      handler: function (newV, oldV) {
        if (newV) {
          this.getGoodsDetail();
          this.getTreeSelect();
        }
      },
    },
  },
  methods: {
    // 树结构列表
    getTreeSelect() {
      listGoods().then((res) => {
        this.data = res.data;
        // console.log(this.data);
        this.changeData = JSON.parse(JSON.stringify(this.data));
      });
    },
    getvaluemethod(val) {
      console.log(val);
      getSupplierDetail(val).then((res) => {
        if (res.code == 200) {
          this.form.contact = res.data.contact;
          this.form.mobile = res.data.mobile;
          this.form.address = res.data.address;
        } else {
          this.$message.error("该供货商无关联信息！");
          this.form.contact = "";
          this.form.mobile = "";
          this.form.address = "";
          // console.log(this.form);
        }
      });
    },
    getGoodsDetail() {
      getSupplier().then((res) => {
        this.supplierList = res.data;
      });
      let data = {
        id: this.record.form.id,
      };
      getGoods(data.id).then((res) => {
        this.form = res.data;
        if (this.form.currentStock == 0) {
          // this.form.currentStock = "";
        }
        if (this.form.categoryId == 0) {
          this.form.categoryId = "";
        }
      });
    },
    submitForm() {
      this.form.supplier = this.$refs.myselect.selected.label;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          updateGoods(this.form).then((response) => {
            this.$modal.msgSuccess("编辑成功");
            this.$refs["form"].resetFields();
            this.$emit("refresh");
          });
        }
      });
    },
    cancel() {
      this.$emit("refresh");
    },
    // 四级菜单
    formatData(data) {
      let options = [];
      data.forEach((item, key) => {
        options.push({ label: item.title, value: item.id });
        if (item.children) {
          item.children.forEach((items, keys) => {
            options.push({ label: items.title, value: items.id });
            if (items.children) {
              items.children.forEach((itemss, keyss) => {
                options.push({ label: itemss.title, value: itemss.id });
                if (itemss.children) {
                  itemss.children.forEach((itemsss, keysss) => {
                    options.push({ label: itemsss.title, value: itemsss.id });
                  });
                }
              });
            }
          });
        }
      });
      return options;
    },
    handleNodeClick(node) {
      console.log(node);
      this.treeName = node.title;
      this.form.categoryId = node.id;
      this.$refs.selectTree.blur();
    },
  },
};
</script>

<style>
</style>
